<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-24 16:33:27
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-18 20:26:30
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamNoticeBoard/peopleOverView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col gap-4 px-2">
    <ChartContainer v-if="abilityData" title="销售能力画像" :subtitle="`达标分数:${abilityStandardScore}`">
      <!-- 雷达图 -->
      <radarChart :data="radarData" />
    </ChartContainer>
    <!-- 能力评估达标率 -->
    <ChartContainer title="能力评估达标率" subtitle="点击饼图图例可跳转查看沟通详情">
      <!-- 饼图 -->
      <CircleChart :data="data" />
    </ChartContainer>

    <scoreTable :memberBoardList="[currentMemberInfo]" :isTeam="false" :enableFilter="false" :enableSort="false" />
  </div>
</template>

<script setup>
import scoreTable from "@/views/myXmate/components/scoreTable.vue";
import CircleChart from "@/components/charts/circleChart.vue";
import radarChart from "@/components/charts/radarChart.vue";
import ChartContainer from "@/views/myXmate/myTeam/teamNoticeBoard/visitSituation/chartContainer.vue";
import { defineProps, computed, onMounted, inject, ref } from "vue";
import { useMyXmateStore } from "@/store";
import { getSalesAbilityScoreAPI } from "@/services/myXmate";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  ssoUserId: {
    type: String,
    required: true,
  },
});

const myXmateStore = useMyXmateStore();
const memberBoardList = computed(() => myXmateStore.memberBoardList);
const abilityStandardScore = computed(() => myXmateStore.noticeBoardPublicParam.abilityStandardScore || 0);

const teamId = inject("teamNoticeBoard/teamId");
const periodType = inject("teamNoticeBoard/periodType");

const currentMemberInfo = computed(() => {
  return memberBoardList.value.find((item) => item.id === props.id) || {};
});

const achievedCount = computed(() => {
  return currentMemberInfo.value.salesAbilityPassCount || 0;
});

const unAchievedCount = computed(() => {
  return currentMemberInfo.value.salesAbilityNotPassCount || 0;
});

// const abilityStandardScore = computed(() => {
//   return currentMemberInfo.value.abilityStandardScore || 0;
// });

const unDetermineNum = computed(() => {
  return (
    currentMemberInfo.value.totalVisitCount - achievedCount.value - unAchievedCount.value
  );
});

const abilityData = ref(null);
onMounted(async () => {
  if (teamId.value && props.ssoUserId && periodType) {
    const data = await getSalesAbilityScoreAPI(teamId.value, props.ssoUserId, periodType);
    abilityData.value = data.datas;
    console.log("abilityData: ", abilityData.value);
  }
});

const data = computed(() => {
  return [
    { value: achievedCount.value, name: "能力评估达标数", type: "completed" },
    {
      value: unAchievedCount.value,
      name: "能力评估未达标数",
      type: "uncompleted",
    },
    {
      value: unDetermineNum.value,
      name: "无法判定",
      type: "unDetermine",
    },
  ];
});

const radarData = computed(() => {
  return abilityData.value.map((item) => {
    return {
      name: item.assessmentName,
      value: parseFloat(item.assessmentValue).toFixed(2),
    };
  });
});
</script>

<style lang="less" scoped></style>
